<template>
	<div>
		<div style="background:url(http://lak110.gitee.io/gdapp/src/images/banner2.png);background-size:cover;">
			<div class="status-top"></div>
		</div>
		<ul class="top-tab flexLeft">
			<!-- <li :class="tabIndex=='none'?'tab-active':''" @click="tabBar('none')">全部</li> -->
			<li :class="tabIndex==1?'tab-active':''" @click="tabBar(1)">已处理</li>
			<li :class="tabIndex==0?'tab-active':''" @click="tabBar(0)">未处理</li>
		</ul>

		<ul class="order-con">
			<li class="order-item flexBetween" v-for="item in selectMeterArr">
				<div class="flexLeft" @click="getItemDetails(item,tabIndex)">
					<!-- <img src="https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png" alt=""> -->
					<span class="iconfont icon-yonghu" :class="className"></span>
					<div style="max-width:8.51rem">
						<div class="person-name">{{item.unit}}-{{item.company}}</div>
						<!-- <div class="person-info">联系人:{{item.receiverName}}</div> -->
						<div class="person-info">原因:{{item.reason}}</div>
					</div>
				</div>
				<div class="flexColumnEnd">
					<span class="order-time">{{item.sendDate}}</span>
					<mt-badge size="normal">{{item.receiverName}}</mt-badge>
				</div>
			</li>
		</ul>

		<div  style="color: #666666;font-size: 0.85rem;text-align: center;" v-if="selectMeterArr.length==0">
      <div class="bottom-placehoder"></div>
			暂无数据
		</div>




		<foot-guide></foot-guide>
	</div>
</template>

<script>
	import footGuide from 'src/components/footer/footGuide'
	import {
		Badge
	} from 'mint-ui';
	export default {
		components: {
			footGuide,
			Badge
		},
		data() {
			return {
				tabIndex: 1,
				selectMeterArr: [],
			}
		},
		computed: {
			className() {
				if (this.tabIndex) {
					return 'iconActive';
				} else {
					return '';
				}

			}
		},

		methods: {
			tabBar(index) {
				this.tabIndex = index;
				this.selectMeterMaintain();
			},
			//派单查看
			selectMeterMaintain() {
				this.$axios.post('gdiot/meter/selectMeterMaintain', {
					"page": "1",
					"rows": "10",
					"status": this.tabIndex
				}).then((p) => {
					console.log(p)
					this.selectMeterArr = [];
          this.selectMeterArr = p.data.result.rows;
				})
			},
			//处理完了  查看详情
			getItemDetails(item, flag) {
				if (flag) {
					this.$router.push({
						path: '/getItemDetails',
						query: item
					})
				}


			}

		},
		created() {
			this.selectMeterMaintain()

		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.status-top {
		height: 2.97rem;
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url(http://lak110.gitee.io/gdapp/src/images/wave.gif);
		mix-blend-mode: screen;
		vertical-align: middle;
	}


	.top-tab {
		padding: 10px 0;

		li {
			flex: 1;
			text-align: center;
			font-size: 0.68rem;
			padding-bottom: 5px;
		}
	}

	.tab-active {
		border-bottom: 2px solid #26A2FF;
		color: #26A2FF;
	}

	.order-con {
		padding: 10px;
		background: white;

		.order-item {
			margin-bottom: 0.63rem;

			.flexLeft {
				flex: 1;
			}

			img {
				width: 2.21rem;
				height: 2.21rem;
				border-radius: 4px;
				margin-right: 0.85rem;
			}

			.iconfont {
				font-size: 1.8rem;
				color: #aaaaaa;
			}

			.person-name {
				font-size: 16px;
				color: rgb(51, 51, 51);
			}

			.person-info,
			.order-time {
				font-size: 0.55rem;
				color: rgb(170, 170, 170);
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.order-status {
				color: #E54D42;
				font-size: 0.55rem;
			}
		}
	}

	.iconActive {
		color: #26a2ff!important;
	}
</style>
